<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
  <title>饼图的实现</title>
</head>

<body>
  <!-- 饼图特点
      饼图可以很好地帮助用户快速了解不同分类的数据的占比情况
  -->
  <!-- 常见效果
    显示数据
      label.formatter
    圆环
      设置两个半径radius:['50%','70%']
    南丁格尔图
      roseType:'radius'
    选中效果
      选中模式：selectedMode:single\multiple
      选中偏移量 selectedOffset:30
  -->
  <div style="width: 600px;height: 400px;margin-left: 100px;"></div>

  <script>
    var mChart = echarts.init(document.querySelector('div'));
    var pieData = [{
      name: '淘宝',
      value: 11231
    }, {
      name: '京东',
      value: 22673
    }, {
      name: '唯品会',
      value: 6123
    }, {
      name: '1号店',
      value: 8989
    }, {
      name: '聚美产品',
      value: 6700
    }];
    var option = {
      series: [{
        type: 'pie',
        data: pieData,
        label: {
          show: true, //显示文字
          // 决定文字显示的内容
          formatter: function(arg) {
            // console.log(arg);
            return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%';
          }
        },
        // radius: 20, // 饼图的半径
        // radius:'20%', // 百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
        // radius: ['50%', '75%'] // 第0个元素代表的是内圆的半径 第1个元素外圆的半径

        // 南丁格尔图
        roseType: 'radius',
        // 选中模式
        selectedMode: 'single',

        // 选中偏移量
        selectedOffset: 20

      }]
    };
    mChart.setOption(option);
  </script>
</body>

</html>